{
  /**
   * 提供一个列表，每个列表后面有个删除按钮，点击相应的删除按钮就可以删除相应的列表的其中一行，并且要以面向对象的方式实现
   *1.思考面向对象：
   *
   */
  /**
   * [getEl 遍历每个对象然后监听事件，给他添加事件]
   * @return {[type]} [description]
   */
  function getEl() {
    let deleteBtn = document.querySelectorAll('.btn');
    deleteBtn.forEach((item) => {
      item.addEventListener('click', removeItem);
    })
  }

  function removeItem(e) {
    event.target.parentNode.remove()
  }
  // getEl();


}

{
  /**
   * [parentEvent 事件代理，事件委托的方式]
   * @return {[type]} [description]
   */
  function parentEvent() {
    let parent = document.querySelector('.parent');
    parent.addEventListener('click', removeSon)
  }
  function removeSon(e) {
    e.target.className.includes('btn')&&e.target.parentNode.remove();
  }
  // parentEvent()
}

{
  class List{
    constructor(el){
      //this.el是一个存放所以删除这个元素的一个数组;
      this.el=Array.from(document.querySelectorAll(el));
      //用self保存一下变量，
      let self=this;
      this.el.forEach((item)=>{
        item.addEventListener('click',function(e){
          if(e.target.className.indexOf('btn')>-1){
            self.removeItem.call(self,e.target)
          }
        })
      })
    }
    removeItem(target){
      let self=this;
      let findParet=function(node){
        let parent=node.parentNode;
        // console.log('parent',parent);
        let root=self.el.find(item=>item===parent);
        // console.log('root',root);
        if(root){
          root.removeChild(node);
        }else{
          findParet(parent);
        }
      }
      findParet(target);
    }
  }

  window.addEventListener('DOMContentLoaded',function(){
    new List('.parent')
  })

}
